<template>
  <div class="main">
    <div class="card">
      <div class="user">
        <h2
          @click="goBind"
        >{{$store.state.userInfo.EntName?$store.state.userInfo.EntName:'[请登记企业信息]'}}</h2>

        <h1>{{$store.state.userInfo.NickName}}</h1>
        <img :src="$store.state.userInfo.HeadimgUrl" alt>
      </div>
      <div @click="go('/ent')" class="ent">
        用户注册
        <div class="right">
          <!-- <i class="iconfont icon-erweima ewm"></i> -->
          <i class="iconfont icon-arrow-right"></i>
        </div>
      </div>
    </div>
    <h4>资源管理</h4>
    <ul class="menu">
      <li @click="go('/demand')">
        <i class="iconfont icon-xuqiuzhongxin left c1"></i>
        <span>定制收藏</span>
        <i class="iconfont icon-arrow-right right"></i>
      </li>
      <li @click="go('/user/shopcart')">
        <i class="iconfont icon-Navi_goumai left c2"></i>
        <span>我的收藏{{$store.state.notice.shopCartCount?'('+$store.state.notice.shopCartCount+')':''}}</span>
        <i class="iconfont icon-arrow-right right"></i>
      </li>
      <li @click="go('/user/pub')">
        <i class="iconfont icon-fabu left c3"></i>
        <span>资源上传</span>
        <i class="iconfont icon-arrow-right right"></i>
      </li>
      <li @click="go('/mylist')">
        <i class="iconfont icon-liebiao left c1"></i>
        <span>我的列表</span>
        <i class="iconfont icon-arrow-right right"></i>
      </li>

      <!-- <li  @click="go('/orderBuy')">
                <i class="iconfont icon-jilu left"></i>
                <span>我的订单</span>
                <i class="iconfont icon-arrow-right right"></i>
      </li>-->
    </ul>
    <h4>智能供需</h4>
    <ul class="menu">
      <li @click="go('/supply')">
        <i class="iconfont icon-docking left c2"></i>
        <span>供需对接</span>
        <i class="iconfont icon-arrow-right right"></i>
      </li>

      <li @click="go('/TeJia')">
        <i class="iconfont icon-cedaohang-cuxiaoguan left c3"></i>
        <span>特价推送</span>
        <i class="iconfont icon-arrow-right right"></i>
      </li>
    </ul>
    <h4>用户互动</h4>
    <ul class="menu">
      <!-- <li  @click="go('/user/guide')">
                <i class="iconfont icon-zhinan left"></i>
                <span>交易指南</span>
                <i class="iconfont icon-arrow-right right"></i>
            </li>
            <li  @click="go('/user/introduce')">
                <i class="iconfont icon-jieshao left"></i>
                <span>聚棉介绍</span>
                <i class="iconfont icon-arrow-right right"></i>
      </li>-->
      <li @click="go('/user/msgUserList')">
        <i class="iconfont icon-xiaoxi left c3"></i>
        <span>好友私信{{$store.state.notice.msgCount?'('+$store.state.notice.msgCount+')':''}}</span>
        <i class="iconfont icon-arrow-right right"></i>
        <b v-show="$store.state.notice.msgCount"></b>
      </li>
      <li @click="go('/user/entList')">
        <i class="iconfont icon-heimingdan left c2"></i>
        <span>企业名录</span>
        <i class="iconfont icon-arrow-right right"></i>
      </li>
      <li @click="go('/user/complain')">
        <i class="iconfont icon-tousu left c1"></i>
        <span>意见投诉</span>
        <i class="iconfont icon-arrow-right right"></i>
      </li>
    </ul>
    <ul class="menu" v-show="$store.state.userInfo.isAdmin">
      <li @click="go('/user/link')">
        <i class="iconfont icon-iconfontzhizuobiaozhun023130-copy left c1"></i>
        <span>生成分享链接</span>
        <i class="iconfont icon-arrow-right right"></i>
      </li>
    </ul>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  methods: {
    go(url) {
      this.$router.push(url);
    },
    goBind() {
      if (!this.$store.state.userInfo.EntName) {
        this.$router.push("/user/bind");
      }
    }
  },
  created() {
    console.log(this.$store.state);
  }
};
</script>

<style scoped lang='less'>
.main {
  text-align: left;
  margin-bottom: 70px;
  padding-bottom: 50px;
  h4 {
    background: #fff;
    border-bottom: 1px solid #f2f2f2;
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
  }
  .card {
    margin: 1em;
    padding: 1em;
    position: relative;
    background: #fff;
    font-size: 16px;

    h2 {
      font-size: 16px;
      height: 3em;
    }
    h1 {
      font-size: 22px;
    }
    img {
      position: absolute;
      top: 1em;
      right: 1em;
      width: 5em;
      height: 5em;
      border-radius: 0.5em;
    }
    .user {
      padding-bottom: 10px;
      border-bottom: 1px solid #f0f0f0;
    }
    .ent {
      color: #ff3f3e;
      font-weight: bold;
      padding-top: 1em;
      .right {
        float: right;
      }
    }
    .ewm {
      color: #0050e5;
    }
  }
  .menu {
    margin-bottom: 0.6em;
    li {
      display: block;
      position: relative;
      background: #fff;
      border-bottom: 1px solid #f2f2f2;
      height: 3em;
      line-height: 3em;
      .left {
        position: absolute;
        left: 1em;
        top: 0.5em;
        color: #fff;
        font-size: 18px;
        display: inline-block;

        line-height: 1.5em;
        padding: 0 0.3em;
        border-radius: 4px;
      }
      .c1 {
        background: #2cb98e;
      }
      .c2 {
        background: #fa8e53;
      }
      .c3 {
        background: #ff6e97;
      }
      .right {
        float: right;
        margin-right: 1em;
      }
      span {
        margin-left: 4em;
      }
      b {
        position: absolute;
        top: 6px;
        left: 30px;
        background: #ff3f3e;
        color: #fff;
        font-size: 9px;
        height: 1em;
        line-height: 1em;
        width: 1em;
        border-radius: 50%;
        text-align: center;
        display: block;
        font-weight: normal;
      }
    }
  }
}
</style>